<template>
	<view>
		<!--顶部S-->
		<view class="top-box  level_align flex_around tp-h88">
			<view class="dingwei  center_combo tp-bgf" @click="pageJumps('../make/selectCity')">
				<image src="../static/icon/position.png" class="tp-img28 tp-mr15" mode=""></image>
				<text class="font">{{nowCity}}</text>
				<uni-icons type="arrowdown" size="14" color="#999"></uni-icons>
			</view>
			<view class="search  tp-bbox">
				<uni-search-bar radius="100" placeholder="请输入关键字" bgColor="#fff" @cancel="search" @clear="search" @confirm="search" />
			</view>

		</view>
		<!--顶部E-->
		<!--筛选S-->
		<view class="shaixuan-box tp-h88 tp-bgf level_align tp-bbox flex_between tp-fc333 tp-fz28 tp-ptb0lr30 tp-pr">
			<view class="level_align tp-h100 tp-ptb0lr20" @click="showChange(0)" :style="{color: showIndex == 0 ? '#00B4FF': ''}">
				<text class="tp-mr15">分类</text>
				<image v-show="showIndex != 0" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 0" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(1)" :style="{color: showIndex == 1 ? '#00B4FF': ''}">
				<text class="tp-mr15">{{ !hotelTypeVal.value || ((hotelTypeVal && hotelTypeVal.value == '全部') )? '季节' : hotelTypeVal.value  }}</text>
				<image v-show="showIndex != 1" class="sanjiao" src="../static/icon/sanjiao.png" mode=""></image>
				<image v-show="showIndex == 1" class="sanjiao" src="../static/icon/sanjiao-lan.png" mode=""></image>
			</view>
			<view class="level_align tp-h100" @click="showChange(2)">
				<text class="tp-mr15">排序</text>
				<image v-show="pxtype == 'asc'" class="sort-img" src="../../static/imgs/icons/price-down-icon.png" mode=""></image>
				<image v-show="pxtype == 'desc'" class="sort-img" src="../../static/imgs/icons/price-up-icon.png" mode=""></image>
			</view>
			<image @click="xlist=1" v-if="xlist==0" class="tp-img36" src="../static/icon/heng.png" mode=""></image>
			<image @click="xlist=0" v-if="xlist==1" class="tp-img36" src="../static/icon/kuai.png" mode=""></image>
		</view>
		<!--筛选E-->
		<!--列表S-->
		<view class="list" v-if="xlist==0" style="margin-top: 176rpx;">
			<view v-for="item in list" :key="item.jqId" class="listone tp-ptb0lr30 tp-pt20 tp-pb20" @click="gosee(item)">
				<view class="tp-pr">
					<image class="tp-br12 left-img tp-mr20" :src="wwwImgUrl + item.jqCover" mode="aspectFill"> </image>
					<view class="jijiepar center_combo tp-ptb0lr20">
						{{ item.jqSeasons ? item.jqSeasons.join('、') : ''}}
					</view>
				</view>
				<view class="flex-1 flex_column flex" style="height: 180rpx;">
					<text class="scname ellispsis1">{{item.jqName}}</text>
					<view class="sctitle ellispsis1">{{item.jqIntro}}</view>
					<view class="level_align flex_between">
						<text class="scaddress"> <text class="tp-mr10">{{item.sales}}人已买</text>   <text v-if="item.distance" class="tp-tyc">| 距您{{item.distance}}km</text> </text>
						<view class="level_align flex_end">
							<view class="biaoqianlist tp-mr10 tp-fc tp-wsn" v-for="(it,ind) in item.jqLabels" :key="ind">
								{{it}}
							</view>
						</view>
					</view>
					<view class="level_align flex_between">
						<view class="flex align_baseline">
							<view class="flex align_baseline tp-mr20 tp-red tp-fw600">
								￥<text class="tp-fz30">
									{{item.currentPrice}}
								</text>起
							</view>
							<text class="tp-tdlt tp-fc999">
								¥{{item.originalPrice}}起
							</text>
						</view>
						<text class="scpingfen">{{item.jqScore}}分</text>
					</view>
				</view>
			</view>
		</view>
		<!--列表E-->
		<!--块列表模式S-->
		<view class="z-list tp-ptb0lr30 flex flex_between  flex_wrap" v-if="xlist==1" style="margin-top: 176rpx;">
			<view v-for="item in list" :key="item.jqId" class="z-listone column_align" @click="gosee(item)">
				<view class="z-top tp-pr">
					<image :src="wwwImgUrl + item.jqCover" class="z-top-img " style="border-radius: 12rpx 12rpx 0 0;" mode="aspectFill">
					</image>
					<view class="z-jijiepar center_combo tp-ptb0lr20">
						{{ item.jqSeasons ? item.jqSeasons.join('、') : ''}}
					</view>
				</view>
				<view class="z-bottom">
					<text class="z-scname ellispsis1">{{item.jqName}}</text>
					<text class="z-sctitle ellispsis1 ">{{item.jqIntro}}</text>
					<view class="z-bp flex flex_between">
						<view class="z-allbiaoqian">
							<view class="z-biaoqianlist tp-mr20" v-for="(it,ind) in item.jqLabels" :key='ind'>
								<text class="z-biaoqian">{{it}}</text>
							</view>
						</view>
						<text class="z-scpingfen">{{item.jqScore}}分</text>
					</view>
					<view class="">
						<text class="z-scpricetop">¥</text>
						<text class="z-scprice">
							{{item.currentPrice}}
						</text>
						<text class="z-scpricebottom">起</text>
						<text class="z-scoldprice">
							¥{{item.originalPrice}}起
						</text>
					</view>

				</view>
			</view>
		</view>
		<!--纵向列表模式E-->
		<!-- 筛选的弹框 S -->
		<uni-popup id="popup" ref="popup" type="top" :animation="false" @change="filtratePopup">
			<view class="popup-content tp-bgf  tp-w100" style="top: 176rpx;position: fixed;border-top: 2rpx solid #e6e6e6">
				<!-- 分类区域 S -->
				<view v-if="showIndex == 0" class="area-box  tp-fc333 tp-fz28">
					<view class="">
						<view class="lblist">
							<view class="lbbiaoqian">
								<view class="lbbiaoqianlist" :class="{'active':spanIndex.indexOf(item.id)>-1}" @click="changeValue1(item,index)"
								 v-for="(item,index) in fllist" :key='index'>
									<text class="lbtit">{{item.value}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="area-bottom center_combo">
						<view @click="filtratePopupClose" class="btn tp-mr30 tp-bcF5 tp-fc666  center_combo">
							取消
						</view>
						<view @click="areaSearch()" class="btn tp-bc tp-fcF center_combo">
							确定
						</view>
					</view>
				</view>
				<!-- 分类区域 E -->

				<!-- 季节类型 S -->
				<view v-if="showIndex == 1" class="tp-h88 tp-w100 level_align tp-bgf tp-ptb0lr30 tp-bdbm tp-fc333 tp-fz30" v-for="(item,index) in hotelType"
				 :key="index" @click="selectHotel(item)">
					{{item.value}}
				</view>
				<!-- 季节类型 E -->
			</view>
		</uni-popup>
		<!-- 筛选的弹框 E-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nowCity: '', // 当前选择的城市
				showIndex: 4, //  0位置区域 	1价格	2房型	3没选中的
				leftlist: ["不限", "中原区", "二七区", "管城回族区", "金水区", "上街区", "惠济区", "中牟县", "巩义市", "荥阳市", "新密市", "新郑市", "登封市"], // 选择位置区域 左边数据

				fllist: [], //景区类型
				fllistid: [], //选中的类型id
				hotelType: [], // 季节类型
				hotelTypeVal: {}, // 选中的季节类型
				spanIndex: [],
				xlist: 0,

				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				list: [],
				searchVal: null,
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
				pxtype: 'asc',
			};
		},
		onLoad(opt) {
			this.searchVal = opt.searchVal && opt.searchVal
			this.mixinInitMap()
			for (let i = 200; i < 203; i++) {
				this.getDictData(i)
			}
			this.nowCity = this.$store.getters.getChangeNowCity
			this.getlist()
		},
		onShow() {
			if (this.$store.getters.getChangeNowCity != this.nowCity) {
				this.nowCity = this.$store.getters.getChangeNowCity
				this.pageNum = 1
				this.getlist()
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.getlist()
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getlist()
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		methods: {
			// 搜索
			search(e) {
				this.searchVal = e.value
				this.pageNum = 1
				this.getlist()
			},
			//景区列表
			getlist() {
				let param = {
					jqSeason: this.hotelTypeVal.id,
					keyWords: this.searchVal,
					city: this.nowCity,
					jqTypes: this.fllistid,
					orderBy: this.pxtype,
				}
				this.$http.post(this.$api.scenicIndex + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(res => {
					uni.stopPullDownRefresh();
					this.showLoadMore = false;
					if (res.code == 200) {
						this.last_page = res.data.pageTotal
						res.data.result.map(item => {
							let arr = item.jqLabels,
								brr = [];
							if (item.jqLabels && item.jqLabels.length && item.jqLabels.length > 2) {
								for (let i = 0; i < 2; i++) {
									brr.push(arr[i])
								}
								item.jqLabels = brr
							}
						})
						if (this.pageNum > 1) {
							this.list = this.list.concat(res.data.result);
						} else {
							this.list = res.data.result
						}
						if(this.searchVal){  // 如果是目的地搜索过来的，请求之后
							this.searchVal = ''
						}
					}
				})
			},
			// 各种下拉选项设置200.景区类型  201:景区标签 202:景区季节 203:景区评价标签 204:景区退票原因
			getDictData(type) {
				this.$http.get(this.$api.dictData + '?type=' + type).then(res => {
					if (res.code === 200) {
						console.log(res)
						if (type == 202) {
							let obj = {
								value: '全部',
								id: null
							}
							this.hotelType = res.data
							this.hotelType.unshift(obj)
						} else if (type == 201) {
							this.xingList = res.data
						} else if (type == 200) {
							this.fllist = res.data
						}
					}
				})
			},
			//点击改变抽屉中标签的样式
			changeValue1(item, index) {
				/* this.fllistid.push(item.id) */
				let arrIndex = this.spanIndex.indexOf(item.id);

				if (arrIndex > -1) {
					this.spanIndex.splice(arrIndex, 1);

				} else {
					this.spanIndex.push(item.id);
				}
				this.fllistid = this.spanIndex
			},
			// 选择的切换
			showChange(ind) {
				this.showIndex = ind
				if (ind != 2) {
					this.$refs.popup.open()
				}
				if (ind == 2) {
					if (this.pxtype == 'asc') {
						this.pxtype = 'desc'
						this.pageNum = 1
						this.getlist()
						return
					}
					if (this.pxtype == 'desc') {
						this.pxtype = 'asc'
						this.pageNum = 1
						this.getlist()
						return
					}
				}
			},
			// 筛选弹框显示隐藏改变
			filtratePopup(e) {
				if (!e.show) {
					this.showIndex = 4
				}
			},
			// 取消
			filtratePopupClose() {
				this.fllistid = []
				this.spanIndex = []
				this.showIndex = 4
				this.pageNum = 1
				this.$refs.popup.close()
				this.getlist()
			},
			// 选择区域确定
			areaSearch() {
				this.$refs.popup.close()
				this.pageNum = 1
				this.getlist()
				// this.search();
			},
			// 选择季节
			selectHotel(item) {
				this.hotelTypeVal = item
				this.$refs.popup.close()
				this.pageNum = 1
				this.getlist()
			},
			// 改变房型
			changeFang(item, index) {
				this.xingActive = index
				this.xingVal = item
			},
			gosee(item) {
				/* var add = JSON.stringify(item) */
				uni.navigateTo({
					url: '/pagesSecond/scenic/scenicDetail?id=' + item.jqId
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	/* /deep/ .{
		background: none!important;
	} */
	/*顶部S--*/
	.top-box {
		background: #00B4FF;
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;

		.dingwei {
			width: 180rpx;
			height: 56rpx;
			border-radius: 28rpx;
		}

		.dingweiimg {
			width: 28rpx;
			height: 28rpx;
		}

		.search {
			width: 480rpx;
			padding: 16rpx 0;

			/deep/ .uni-searchbar {
				height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				line-height: 56rpx;
			}

			/deep/ .uni-searchbar__cancel {
				color: #fff;
			}
		}
	}

	/*顶部E--*/
	/*功能栏S--*/
	.shaixuan-box {
		position: fixed;
		/* #ifdef MP-WEIXIN */
		top: 88rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 176rpx;
		/* #endif */
		right: 0;
		z-index: 10000;
		width: 100%;
	}

	.set {
		width: 750rpx;
		height: 80rpx;
		background: #FFFFFF;
		justify-content: space-around;
	}

	.image {
		width: 20rpx;
		height: 10rpx;
		margin-bottom: 5rpx;
	}

	.image4 {
		width: 36rpx;
		height: 36rpx;
		position: relative;
		top: 8rpx;
		right: -60rpx;
	}

	.biaoti {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-right: 10rpx;
	}

	.fenlei {
		display: inline-block;
		width: 187.5rpx;
		height: 80rpx;
		padding: 20rpx 0 0 60rpx;
		box-sizing: border-box;
	}

	.jijie {
		display: inline-block;
		width: 187.5rpx;
		height: 80rpx;
		padding: 20rpx 0 0 90rpx;
		box-sizing: border-box;
	}

	.paixu {
		display: inline-block;
		width: 240rpx;
		height: 80rpx;
		padding: 20rpx 0 0 70rpx;
		box-sizing: border-box;
	}

	.shitu {
		display: inline-block;
		height: 80rpx;
	}

	/*功能栏E--*/
	/*列表S--*/
	.list {
		margin-top: 20rpx;
	}

	.listone {
		background: #FFFFFF;
		border-bottom: 1rpx solid #F5F5F5;
		display: flex;
		justify-content: space-between;
	}

	.jijiepar {
		height: 40rpx;
		background: rgba(0, 0, 0, .3);
		border-radius: 12rpx 0rpx 12rpx 0rpx;
		color: rgba(255, 255, 255, .8);
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.jijietitile {
		font-size: 22rpx;
		line-height: 40rpx;
		width: 68rpx;
		margin-left: 20rpx;
		height: 40rpx;
		font-weight: 500;
	}

	.left {
		width: 240rpx;
		height: 210rpx;
	}

	.right {
		width: 510rpx;
		height: 210rpx;
	}

	.left-img {
		width: 240rpx;
		height: 180rpx;
	}

	.right-title {}



	.biaoqianlist {
		padding: 0 6rpx;
		height: 36rpx;
		border: 1rpx solid #00B4FF;
		border-radius: 8rpx;
		text-align: center;
		&:last-child{
			margin-right: 0;
		}
	}

	.biaoqian {
		width: 42rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00B4FF;
		line-height: 36rpx;

	}

	.scname {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.sctitle {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
	}

	.scaddress {
		float: left;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 42rpx;
	}

	.scpricetop {
		width: 21rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #FF4A37;
		font-weight: bold;
		float: left;
	}

	.scprice {
		margin-right: 5rpx;
		height: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FF4A37;
		line-height: 42rpx;
		float: left;
	}

	.scpricebottom {
		width: 21rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #FF4A37;
		font-weight: bold;
		float: left;
	}

	.scoldprice {
		margin-left: 22rpx;
		width: 93rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-decoration: line-through;
		color: #999999;
		line-height: 42rpx;
		float: left;
	}

	.scpingfen {
		right: 30rpx;
		font-size: 26rpx;
		color: #FFAF3C;
	}

	/*列表E--*/
	/*纵向列表S--*/
	.z-list {
		margin-top: 20rpx;
		// justify-content: flex-start;
	}

	.z-listone {
		margin-top: 20rpx;
		border-radius: 12px 12px 0px 0px;
		width: 335rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F5F5F5;
		display: flex;
	}

	.z-jijiepar {
		height: 40rpx;
		background: rgba($color: #333333, $alpha: 1.0);
		opacity: 0.4;
		border-radius: 12rpx 0rpx 12rpx 0rpx;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0rpx;
	}

	.z-jijietitile {
		font-size: 22rpx;
		line-height: 40rpx;
		width: 68rpx;
		margin-left: 20rpx;
		height: 40rpx;
		font-weight: 500;
	}

	.z-top {
		width: 335rpx;
		height: 250rpx;
	}

	.z-bottom {
		margin: 20rpx 0 0 0;
		width: 285rpx;
		height: 250rpx;
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		white-space: nowrap; //溢出不换行
	}

	.z-top-img {
		width: 335rpx;
		height: 250rpx;
		box-sizing: border-box;
	}

	.z-bp {
		margin: 10rpx 0 15rpx 0;
	}

	.z-allbiaoqian {
		overflow: hidden; //超出的文本隐藏
		text-overflow: ellipsis; //溢出用省略号显示
		width: 180rpx;
		height: 40rpx;
	}

	.z-biaoqianlist {
		float: left;
		margin-bottom: 4rpx;
		width: 64rpx !important;
		height: 36rpx;
		border: 1rpx solid #00B4FF;
		border-radius: 8rpx;
		text-align: center;
		font-size: 22rpx;
		line-height: 36rpx;
		color: #00B4FF;
	}

	.z-scpingfen {
		margin-right: 5rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFAF3C;
		line-height: 42rpx;
	}

	.z-scname {
		display: block;
		width: 300rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
	}

	.z-sctitle {

		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 42rpx;
	}

	.z-scaddress {
		float: left;
		width: 300rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #999999;
		line-height: 42rpx;
	}

	.z-scpricetop {
		width: 21rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #FF4A37;
		font-weight: bold;
		float: left;
	}

	.z-scprice {
		margin-right: 5rpx;
		height: 30rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FF4A37;
		line-height: 42rpx;
		float: left;
	}

	.z-scpricebottom {
		width: 21rpx;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #FF4A37;
		font-weight: bold;
		float: left;
	}

	.z-scoldprice {
		margin-left: 22rpx;
		width: 93rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-weight: 500;
		text-decoration: line-through;
		color: #999999;
		line-height: 42rpx;
		float: left;
	}

	/*纵向列表E--*/
	.popup-content {
		position: absolute;
		top: 0;

		.area-bottom {
			height: 120rpx;
			border-top: 2rpx solid #EBEBEB;

			.btn {
				width: 260rpx;
				height: 72rpx;
				border-radius: 36rpx;
			}
		}

		.area-box {
			width: 750rpx;
			background: #FFFFFF;

			.scroll-Y {
				max-height: 554rpx;
			}

			.area-left {
				width: 260rpx;

				.scroll-view-item {
					height: 88rpx;
					background: #F5F5F5;

					&.active {
						background: #FFFFFF;
						position: relative;
						color: $tc;

						&::before {
							position: absolute;
							top: 0;
							left: 0;
							content: "";
							width: 6rpx;
							height: 88rpx;
							background: #00B4FF;
						}
					}
				}
			}

			.area-right {
				.scroll-view-item {
					height: 72rpx;
					background: #FFFFFF;


					&.active {
						color: $tc;
					}
				}
			}
		}

		.price-box {
			background: #FFFFFF;

			.top {
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					width: 280rpx;
					height: 64rpx;
					background: rgba(245, 245, 245, 1);
					border-radius: 8rpx;
					text-align: center;
				}

			}
		}

		.tag {
			display: inline-block;
			width: 154rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			background: #F5F5F5;
			border-radius: 8rpx;
			margin-right: 26rpx;
		}
	}

	/* 筛选弹窗css S-- */
	.lblist {
		/* padding-left: 30rpx; */
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.shaixuan {
		width: 600rpx;
		height: 1206rpx;
		background: #FFFFFF;

		.leibie {
			width: 100%;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding: 40rpx 517rpx 20rpx 30rpx;
		}
	}

	.lbbiaoqian {
		padding: 0 0 40rpx 30rpx;
		width: 100%;

		/* min-height: 100rpx; */
		.active {
			margin: 24rpx 20rpx 0 0;
			padding: 0 16rpx;
			float: left;
			height: 56rpx;
			background: #00B4FF !important;
			text-align: center;

			.lbtit {
				font-size: 26rpx;
				font-weight: 500;
				color: #FFFFFF !important;
				line-height: 56rpx;
			}
		}

		.lbbiaoqianlist {
			margin: 24rpx 20rpx 0 0;
			padding: 0 28rpx;
			float: left;
			height: 56rpx;

			background: #F5F5F5;
			border-radius: 4rpx;
			text-align: center;

			.lbtit {
				font-size: 26rpx;
				font-weight: 500;
				color: #666666;
				line-height: 56rpx;
			}
		}
	}

	.sort-img {
		width: 20rpx;
		height: 26rpx;
	}
</style>
